<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动</title>
		<style>
			.movebox{
				width: 100px;
				height: 100px;
				background-color: black ;
				/*声明调用movebox动画
				默认动画页面加载执行一次
				infinite循环执行,永不停息*/
				animation: movebox 3s linear infinite;
				/*改变默认方式,支持坐标系
				position位置,relative*/
				position: relative;
			}
			/*定义一个动画（关键key帧frame）
			动画一帧一帧图片组成,1秒36帧以上,人眼无法识别
			from动画开始位置,to动画结束位置
			过程css+html会自动产生*/
			@keyframes movebox{
				from{left: 0px;}
				to{left: 1000px;}
			}
		</style>
	</head>
	<body>
		<h3>移动方块动画效果</h3>
		<h4>animation语法</h4>
		<div class="movebox"></div>
	</body>
</html>
